<template>
	<view class="main">
		<view class="radar_container">
			<view class="radar_wave"></view>
			<view class="radar_wave"></view>
			<view class="radar_wave"></view>
			<view class="title">寻找设备</view>
		</view>
		<view class="container">
			<view class="list">
				<view class="item">蓝牙KTV</view>
				<view class="item">蓝牙KTV</view>
				<view class="item">蓝牙KTV</view>
				<view class="item">蓝牙KTV</view>
			</view>
			<view class="no-list">
				<span>没有发现我的设备？</span>
				<span style="margin-left: 40rpx;">重新寻找</span>
			</view>
		</view>
		<view class="footer-tips">
			<view class="tip-title">连接产品说明：</view>
			<view class="tips">
				<view class="tip-item">1、打开产品电源</view>
				<view class="tip-item">2、打开手机蓝牙功能</view>
				<view class="tip-item">3、打开APP，等待APP自动寻找设备，当系统询问是否连接时，点击确认按钮。</view>
				<view class="tip-item">4、如果连接失败，可点击“重新寻找”按钮再次搜索设备。</view>
			</view>
			<view class="tip-btn">我知道了</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	.title{
		font-size: 39rpx;
	}
	.list{
		margin-top: 30rpx;
		background-color: #fff;
	}
	.item{
		padding: 0 30rpx;
		height: 87rpx;
		line-height: 87rpx;
		border-bottom: 1px solid  #f0f0f0;
		font-size: 30rpx;
	}
	.item:last-child{
		border-bottom: none;
	}
	
	.no-list{	
		margin-top: 30rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.footer-tips{
		margin-top: 60rpx;
		padding: 30rpx 40rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
	}
	.tip-title{
		font-weight: bold;
	}
	.tips{
		margin-top: 20rpx;
	}
	.tip-item{
		font-size: 30rpx;
	}
	.tip-btn{
		margin-top: 50rpx;
		width: 100%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 34rpx;
		color: #fff;
		background-color: #027BC4;
	}
	
	.radar_container {
		margin: auto;
		position: relative;
		width: 600rpx;
		height: 600rpx;
		border-radius: 50%;
		overflow: hidden;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.radar_wave {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		border: 1px solid #d1d1d196;
		border-radius: 50%;
		transform: scale(3); // 初始状态改为从中间开始
		box-shadow: inset 0 0 5px 1px #d1d1d196; // 添加阴影
		animation: radar_wave-animation 3s infinite;
	}

	.radar_wave:nth-child(1) {
		animation-delay: 0s;
	}

	.radar_wave:nth-child(2) {
		animation-delay: 1s;
	}

	.radar_wave:nth-child(3) {
		animation-delay: 2s;
	}

	@keyframes radar_wave-animation {
		0% {
			transform: scale(3); // 从中间开始
			opacity: 0.8;
		}

		100% {
			transform: scale(10); // 扩散到原来的10倍大小
			opacity: 0;
		}
	}
</style>